<template>
    <div class="stone">
        <p class="count">你已经获胜了<span>{{winNum}}</span>次</p>
        <div class="two_people">
            <image :src="imageAiScr" class="left_img"/>
            <span class="desc">{{gameOfPlay}}</span>
            <image :src="imageUserScr" class="right_img"/>
        </div>
        <div class="user">
            <p class="top">出拳吧，少年~</p>
            <div class="box">
                <image v-for="(item, index) in srcs" class="item" :src="item" @tap="changeForChoose" :id="index" :key="index"/>
            </div>
            <button class="btn" @tap="again">再来！</button>
            <p class="clear" @tap="clear">清除获胜记录</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Stone',
  data () {
    return {
      winNum: 0,
      imageAiScr: '',
      gameOfPlay: 'Game Draw!',
      imageUserScr: '../../static/images/wenhao.png',
      timer: null,
      srcs: [
        '../../static/images/shitou.png',
        '../../static/images/jiandao.png',
        '../../static/images/bu.png'
      ],
      aiNum: 0,
      btnState: false
    }
  },
  onShow () {
    const that = this
    if (that.timer != null) {
      clearInterval(that.timer)
      that.timer = null
      that.btnState = false
    }
    that.winNum = wx.getStorageSync('winNum')
    that.timerGo()
  },
  methods: {
    // 开启计时器
    timerGo () {
      const that = this
      that.timer = setInterval(that.move, 100)
    },
    move () {
      const that = this
      if (that.aiNum >= 3) {
        that.aiNum = 0
      }
      that.imageAiScr = that.srcs[that.aiNum]
      that.aiNum++
    },

    // 点击按钮
    changeForChoose (e) {
      console.log(e)
      const that = this
      if (that.btnState === true) {
        return
      }
      that.imageUserScr = that.srcs[e.mp.currentTarget.id]
      // 清除计时器
      clearInterval(that.timer)
      if ((that.imageUserScr === '../../static/images/shitou.png' && that.imageAiScr === '../../static/images/jiandao.png') || (that.imageUserScr === '../../static/images/jiandao.png' && that.imageAiScr === '../../static/images/bu.png') || (that.imageUserScr === '../../static/images/bu.png' && that.imageAiScr === '../../static/images/shitou.png')) {
        that.winNum++
        that.gameOfPlay = 'Ho~\nYou Win!'
        wx.setStorageSync('winNum', that.winNum)
      } else if (that.imageAiScr === that.imageUserScr) {
        that.gameOfPlay = 'Game Draw!'
      } else {
        that.gameOfPlay = '0.0~\nYou Lost!'
      }
      that.btnState = true
    },
    again () {
      const that = this
      if (that.btnState === false) {
        return
      }
      that.imageUserScr = '../../static/images/wenhao.png'
      that.timerGo()
      that.btnState = false
    },

    clear () {
      const that = this
      wx.removeStorageSync('winNum')
      that.winNum = 0
    }
  }
}
</script>

<style lang="stylus" scoped>
.stone
    height 100%
    background #D4FEFD
    .count
        height 100rpx
        line-height 100rpx
        color #333
        font-size 30rpx
        text-align center
        span
            color #ED758D
            font-weight 600
    .two_people
        display flex
        justify-content space-around
        align-items center
        width 690rpx
        padding 30rpx 30rpx 60rpx
        .left_img
            width 180rpx
            height 180rpx
        .desc
            font-size 36rpx
            line-height 60rpx
            color #ED758D
            font-weight bold
            max-width 300rpx
            word-wrap break-word
        .right_img
            width 180rpx
            height 180rpx
    .user
        height 700rpx
        width 690rpx
        margin 0 auto
        background #fff
        border-radius 12rpx
        display flex
        flex-direction column
        justify-content flex-start
        align-items center
        .top
            color #333
            font-size 30rpx
            height 100rpx
            line-height 100rpx
        .box
            display flex
            width 100%
            height 160rpx
            justify-content space-around
            align-items center
            margin-bottom 80rpx
            .item
                width 160rpx
                height 160rpx
                border-radius 50%
        .btn
            border 1rpx solid #f5f5f5
            border-radius 16rpx
            background #ED758D
            text-align center
            width 600rpx
        .clear
            color #22C3AA
            font-size 26rpx
            height 100rpx
            line-height 100rpx
            text-align center
</style>
